<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div :style="{ padding: '24px', background: '#fff' }">
            <a-row type="flex" align="middle">
              <a-col :span="4">标题：</a-col>
              <a-col :span="12">
                <a-input v-model="link_title" placeholder="请输入标题" />
              </a-col>
            </a-row>
            <a-row class="mt1rem" type="flex" align="middle">
              <a-col :span="4">上传图片：</a-col>
              <a-col :span="12">
                <div class="clearfix">
                  <div class="img" v-if="!fileList">
                    <img class="img" :src="file_name" />
                  </div>
                  <a-upload
                    listType="picture-card"
                    :remove="handleRemove"
                    :beforeUpload="beforeUpload"
                  >
                    <div v-if="!fileList">
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">上传图片</div>
                    </div>
                  </a-upload>
                </div>
              </a-col>
            </a-row>
            <a-row type="flex" align="middle">
              <a-col :span="4">介绍：</a-col>
              <a-col :span="12">
                <a-input v-model="link_introduce" placeholder="请输入介绍" />
              </a-col>
            </a-row>
            <a-row type="flex" align="middle" class="mt1rem">
              <a-col :span="4">链接状态：</a-col>
              <a-col :span="12">
                <a-radio-group
                  name="radioGroup"
                  :default-value="link_status"
                  :value="link_status"
                  @change="statusChange"
                >
                  <a-radio :value="1">小程序地址</a-radio>
                  <a-radio :value="2">网址</a-radio>
                </a-radio-group>
              </a-col>
            </a-row>
            <a-row
              type="flex"
              align="middle"
              class="mt1rem"
              v-if="link_status == 1"
            >
              <a-col :span="4">Appid：</a-col>
              <a-col :span="4">
                <a-input
                  style="width: 200px"
                  v-model="link_appid"
                  placeholder="请输入Appid"
                />
              </a-col>
            </a-row>
            <a-row class="mt1rem" type="flex">
              <a-col :span="4">跳转地址：</a-col>
              <a-col>
                <a-textarea
                  style="width: 200px"
                  v-model="link_address"
                  placeholder="请填写跳转地址"
                  autosize
                />
              </a-col>
            </a-row>
            <div class="btn">
              <a-button type="primary" :loading="iconLoading" @click="save"
                >修改</a-button
              >
              <a-button class="ml1rem" type="primary" @click="back"
                >返回</a-button
              >
            </div>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import axios from "axios";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
import { baseURL } from "../../api/config.js";
export default {
  data() {
    return {
      // catid: "",
      iconLoading: false,
      loading: false,
      fileList: "",
      link_title: "",
      link_address: "",
      link_introduce: "",
      link_status: 0,
      fileid: 0,
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getdata();
  },
  methods: {
    getdata() {
      this.link_id = this.$route.query.link_id;
      this.setsiders();
      this.getadsdetail();
    },
    //选择图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = file;
      return false;
    },
    upimg() {
      var token = localStorage.getItem("token");
      // const formData = new FormData();
      const formData = new FormData();
      formData.append("files[]", this.fileList);
      formData.append("token", token);
      this.saveFile(formData);
    },
    saveFile(formData) {
      axios({
        method: "post",
        url: baseURL + "Admin/file/uploadfile",
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.imageUrl = res.data;
            this.fileid = res.fileid;
            setTimeout(this.upimages, 1);
            this.$message.success("图片上传成功");
            this.savecontent();
          } else if (res.code == 4001) {
            this.$router.push("/Auth/login");
            this.$message.warning("凭证失效，请重新登陆");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //上传图片
    save() {
      if (this.fileList) {
        this.upimg();
      } else {
        this.savecontent();
      }
    },
    //提交内容
    savecontent() {
      const url = "/Admin/Link/editLink";
      const paramObj = {
        link_id: this.link_id,
        link_title: this.link_title,
        link_address: this.link_address,
        link_introduce: this.link_introduce,
        link_status: this.link_status,
        link_appid: this.link_appid,
        fileid: this.fileid,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.$router.go(-1);
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("修改失败，请刷新重试");
        }
      });
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
    //获取友链详情
    getadsdetail: function () {
      const url = "/Admin/Link/getLinkdetail";
      const paramObj = {
        link_id: this.link_id,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.link_title = res.data.link_title;
          this.link_address = res.data.link_address;
          this.file_name = res.data.file_name;
          this.link_introduce = res.data.link_introduce;
          this.link_status = res.data.link_status;
          this.fileid = res.data.fileid;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("添加失败，请刷新重试");
        }
      });
    },
    statusChange: function (e) {
      this.link_status = e.target.value;
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "4");
    },
  },
};
</script>
<style scoped>
.mt1rem {
  margin-top: 1rem;
}
.ml1rem {
  margin-left: 1rem;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.btn {
  margin-top: 10px;
}
.clearfix {
  display: flex;
}
.img {
  margin-right: 10px;
  height: 102px;
  width: 102px;
}
</style>
